import React, { useEffect, useState, Component } from 'react';
import styles from './index.less';
import { request } from '@/utils/request';
import { connect } from 'dva';
import { Link, history, Redirect } from 'umi';
import {
  Menu, Switch, Divider, Checkbox, Button, Row, Col, Tooltip, notification,InputNumber,Upload,
  Form, Modal, Select, Tree, Icon, Radio, Table, Tag, Pagination, Input, Space, message
} from 'antd';
import { MailOutlined, AppstoreOutlined, SettingOutlined, UploadOutlined, AudioOutlined } from '@ant-design/icons';

import * as XLSX from 'xlsx';

export default (props) => {
  const {style} = props;
  const [visibleMy , setVisibleMy] = useState(true)
  const [columns , setcolumns] = useState([])
  const [dataSource , setdataSource] = useState([])
  
  useEffect(()=>{
    let excelDataStr = localStorage.getItem('excelData')
    let excelData = {}
    if (excelDataStr) {
      excelData = JSON.parse(excelDataStr)
      setcolumns(Object.keys(excelData[0]).map(it=>{
        return {
          title: it,
          dataIndex: it,
          key: it,
        }
      }))
      setdataSource(excelData)
    }

  },[])

  const params = {
    name: 'file',
    action: '/flask/upload',
    headers: {
      // authorization: 'authorization-text',
    },
    onChange(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        message.success(`${info.file.name} file uploaded successfully`);

        // xlsx 解析文件
        onChangeFun(info.file.originFileObj)
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} file upload failed.`);
      }
    },
  };


    // input的onchange事件
  const onChangeFun = (file) => {
    if (!file) return
    const reader = new FileReader();
    reader.readAsBinaryString(file);
    reader.onload = function (e) {
        const data = e.target.result;
        const zzexcel = XLSX.read(data, {
          type: 'binary'
        });
        const result = [];
        for (let i = 0; i < zzexcel.SheetNames.length; i++) {
          const newData = XLSX.utils.sheet_to_json(zzexcel.Sheets[zzexcel.SheetNames[i]]);
          result.push(...newData)
        }

        setcolumns(Object.keys(result[0]).map(it=>{
          return {
            title: it,
            dataIndex: it,
            key: it,
          }
        }))
        setdataSource(result)
        console.log(result);
        localStorage.setItem('excelData', JSON.stringify(result))
    }
  }
  
  return (
    <>
        <div style={{width: '100%', height: '100%', position:'absolute', top:0, left:0 , padding: 20 }}>
          <Divider orientation='left'> 上传excel </Divider>
          {/* <Button type='primary' onClick={uploadExcel}>点击上传</Button> */}
          <Upload {...params}>
            <Button icon={<UploadOutlined />}>点击上传</Button>
          </Upload>
          <Divider orientation='left'> 结果 </Divider>
          <Table 
            columns={columns}
            dataSource={dataSource}
          />
        </div>
    </>
  )
}